<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>Template @ Phoenix Media</title>
	<link rel="stylesheet" type="text/css" href="Content/Common/CSS/Reset.css" />
	<link rel="stylesheet" type="text/css" href="Content/Theme/Default/CSS/Global.css" />
	<script type="text/javascript" src="Content/Common/Scripts/jQuery.js"></script>
	<script type="text/javascript" src="Content/Common/Scripts/iScroll.js"></script>

<style type="text/css" media="all">


#wrapper
{
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}

#scroller
{
	position: absolute;
	z-index: 1;
	/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	padding: 0;
}


#myFrame
{
	position: absolute;
	top: 0;
	left: 0;
}

/**
 *
 * Pull down styles
 *
 */

#pullDown,
#pullUp
{
	background: #fff;
	height: 40px;
	line-height: 40px;
	padding: 5px 10px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	font-size: 14px;
	color: #888;
}

#pullDown {
	margin-top: 50px;
}

#pullDown .icon,
#pullUp .icon
{
	display: block;
	float: left;
	width: 40px;
	height: 40px;
	background: url(Content/Theme/Default/Images/pull-icon@2x.png) 0 0 no-repeat;
	-webkit-background-size: 40px 80px;
	background-size: 40px 80px;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 250ms;
}

#pullDown .icon {
	-webkit-transform: rotate(0deg) translateZ(0);
	-moz-transform: rotate(0deg) translateZ(0);
	-ms-transform: rotate(0deg) translateZ(0);
	-o-transform: rotate(0deg) translateZ(0);
	transform: rotate(0deg) translateZ(0);
}

#pullUp .icon {
	-webkit-transform: rotate(-180deg) translateZ(0);
	-moz-transform: rotate(-180deg) translateZ(0);
	-ms-transform: rotate(-180deg) translateZ(0);
	-o-transform: rotate(-180deg) translateZ(0);
	transform: rotate(-180deg) translateZ(0);
}

#pullDown.flip .icon {
	-webkit-transform: rotate(-180deg) translateZ(0);
	-moz-transform: rotate(-180deg) translateZ(0);
	-ms-transform: rotate(-180deg) translateZ(0);
	-o-transform: rotate(-180deg) translateZ(0);
	transform: rotate(-180deg) translateZ(0);
}

#pullUp.flip .icon {
	-webkit-transform: rotate(0deg) translateZ(0);
	-moz-transform: rotate(0deg) translateZ(0);
	-ms-transform: rotate(0deg) translateZ(0);
	-o-transform: rotate(0deg) translateZ(0);
	transform: rotate(0deg) translateZ(0);
}

#pullDown.loading .icon,
#pullUp.loading .icon
{
	background-position: 0 100%;
	
	-webkit-transform: rotate(0deg) translateZ(0);
	-moz-transform: rotate(0deg) translateZ(0);
	-ms-transform: rotate(0deg) translateZ(0);
	-o-transform: rotate(0deg) translateZ(0);
	transform: rotate(0deg) translateZ(0);
	
	-webkit-animation: loading 2s infinite linear;
	-moz-animation: loading 2s infinite linear;
	-ms-animation: loading 2s infinite linear;
	-o-animation: loading 2s infinite linear;
	animation: loading 2s infinite linear;
}

@-webkit-keyframes loading { 0% { -webkit-transform:rotate(0deg) translateZ(0); } 100% { -webkit-transform: rotate(360deg) translateZ(0); } }
@-moz-keyframes    loading { 0% { -moz-transform:rotate(0deg) translateZ(0); } 100% { -moz-transform: rotate(360deg) translateZ(0); } }
@-ms-keyframes     loading { 0% { -ms-transform:rotate(0deg) translateZ(0); } 100% { -ms-transform: rotate(360deg) translateZ(0); } }
@-o-keyframes      loading { 0% { -o-transform:rotate(0deg) translateZ(0); } 100% { -o-transform: rotate(360deg) translateZ(0); } }
@keyframes         loading { 0% { transform:rotate(0deg) translateZ(0); } 100% { transform: rotate(360deg) translateZ(0); } }
</style>
</head>

<body>
	
	<header>
		<h1>沃学堂</h1>
	</header>
	
	<div id="panel" class="panel">
		<div class="headline">
			<h2><strong>精品推荐</strong></h2>
		</div>
		<div id="gridview" class="list-normal">
			<a class="item video">
				<img src="#" alt="" style="background-image:url(Temporary/figure1.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"><i>6.00</i></li>
					<li class="medium">视频</li>
				</ul>
			</a>
			<a class="item word free">
				<img src="#" alt="" style="background-image:url(Temporary/figure2.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"></li>
					<li class="medium">文本</li>
				</ul>
			</a>
			<a class="item audio free recommend">
				<img src="#" alt="" style="background-image:url(Temporary/figure3.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"><i>15.00</i></li>
					<li class="medium">音频</li>
				</ul>
			</a>
			<a class="item video recommend">
				<img src="#" alt="" style="background-image:url(Temporary/figure1.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"><i>6.00</i></li>
					<li class="medium">视频</li>
				</ul>
			</a>
			<a class="item paper free">
				<img src="#" alt="" style="background-image:url(Temporary/figure2.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"></li>
					<li class="medium">文本</li>
				</ul>
			</a>
			<a class="item audio free">
				<img src="#" alt="" style="background-image:url(Temporary/figure3.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"></li>
					<li class="medium">音频</li>
				</ul>
			</a>
			<a class="item video">
				<img src="#" alt="" style="background-image:url(Temporary/figure1.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"><i>6.00</i></li>
					<li class="medium">视频</li>
				</ul>
			</a>
			<a class="item word free">
				<img src="#" alt="" style="background-image:url(Temporary/figure2.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"></li>
					<li class="medium">文本</li>
				</ul>
			</a>
			<a class="item audio free recommend">
				<img src="#" alt="" style="background-image:url(Temporary/figure3.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"><i>15.00</i></li>
					<li class="medium">音频</li>
				</ul>
			</a>
			<a class="item video recommend">
				<img src="#" alt="" style="background-image:url(Temporary/figure1.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"><i>6.00</i></li>
					<li class="medium">视频</li>
				</ul>
			</a>
			<a class="item paper free">
				<img src="#" alt="" style="background-image:url(Temporary/figure2.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"></li>
					<li class="medium">文本</li>
				</ul>
			</a>
			<a class="item audio free">
				<img src="#" alt="" style="background-image:url(Temporary/figure3.jpg)" />
				<h2>宝宝音乐电台</h2> 
				<p>纯正地道 原汁原味</p>
				<ul>
					<li class="catalog">幼儿</li>
					<li class="view">2.5万</li>
					<li class="price"></li>
					<li class="medium">音频</li>
				</ul>
			</a>
		</div>
	</div>
	
</body>
<script type="text/javascript">
var onPullDownAction = function(query)
{
	alert('更新回调函数, 页码重置为：' + PM.Scroll.Page + '请求参数为：' + JSON.stringify(query));
};

var onPullUpAction = function(query)
{
	alert('加载回调函数, 当前加载的第 {' + PM.Scroll.Page + '} 页, 请求参数为：' + JSON.stringify(query));
};

window.setTimeout(function()
{
	PM.Scroll.Initialize(
	{
		region: 'panel',
		gridview: 'gridview',
		doPullDown: onPullDownAction,
		doPullUp: onPullUpAction,
		update: 'AJAX/List.html',
		load: 'AJAX/List.html',
		page: 0,
		size: 10,
		query:
		{
			orderby: 'id',
			catalog: 0
		}
	});
}, 200);
</script>
</html>
